<template>
	<view class="messageList">
		<view class="cont" v-for="(item,i) in messageList" :key="i">
			用户 {{item.name}}<text :class="item.level == 1 ? 'level tourist' : 'level'">{{switchLevel(item.level)}}</text>在 {{item.time}} {{switchOper(item.status)}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				messageList: [
					{
						name:'测试用户',
						level:1,
						time:'2022-11-05 12:30:30',
						status: 1, //1-开门，2-开台，3-关台
					},{
						name:'测试用户',
						level:2,
						time:'2022-11-05 12:30:30',
						status: 2, //1-开门，2-开台，3-关台
					}
				]
			}
		},
		methods: {
			switchLevel(id) {
				switch (id) {
					case 1:
						return '游客'
					case 2:
						return '会员'
				}
			},
			switchOper(id){
				switch (id) {
					case 1:
						return '开门'
					case 2:
						return '开台'
					case 3:
						return '关台'
				}
			}
		}
	}
</script>

<style lang="less">
	.messageList {
		margin: 32rpx;
		.cont{
			padding: 32rpx;
			background: #fff;
			border-radius: 16rpx;
			font-size: 24rpx;
			color: #171717;
			line-height: 34rpx;
			margin-bottom: 32rpx;
			
			.level{
				margin-left: 16rpx;
				padding: 0 18rpx;
				height: 34rpx;
				background: rgba(230,0,18,0.1);
				border-radius: 8rpx;
				font-size: 20rpx;
				color: #E60012;
				margin: 0 10rpx;
				line-height: 34rpx;
			}
			.tourist{
				background: #F6F6F6;
				color: #5B5B5B;
			}
		}
	}
</style>
